﻿@{
    ViewBag.Title = "Index";
}
<div class="layui-form-item">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" id="Code" placeholder="车辆编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <a class="layui-btn" id="btnSearch">搜索</a>
    </div>
</div>
<table id="table" class="layui-table" lay-filter="table"></table>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        @Html.LayuiButton("add", "新增车辆", "layui-btn layui-btn-sm", "/Resource/Park/Add")
        @Html.LayuiButton("edit", "编辑车辆", "layui-btn layui-btn-sm", "/Resource/Park/Edit")
        @*@Html.LayuiButton("delete", "删除车辆", "layui-btn layui-btn-sm", "/Resource/Park/Index")*@
    </div>
</script>
<script>
    layui.use(['table', 'layer'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        //查询
        function getWhere() {
            var where = { Code: $("#Code").val() };
            return where;
        }
        layui.tableReload = function () {
            table.reload("table", {
                where: getWhere(),
                page: { curr: 1 }
            });
        }
        $("#btnSearch").click(function () {
            layui.tableReload();
        })
        // 渲染表格
        table.render({
            id: "table",
            elem: '#table',
            method: "post",
            url: 'List',
            cellMinWidth: 80,
            toolbar: "#toolbar",
            cols: [
                [
                    { type: 'checkbox' },
                    { field: 'Code', title: '车辆编号' },
                    { field: 'DeptName', title: '所属公司' },
                    { field: 'VehicleNo', title: '车牌号' },
                    { field: 'Color', title: '车牌颜色' },
                    { field: 'Longitude', title: '车轴数' },
                    { field: 'CreateDate', title: '新增日期' },
                ]
            ],
            done: function (res, curr, count) { //res 即为原始返回的数据
                //console.log(res);
            },
            loading: false,
            event: true,
            page: { limit: 20 }
        });

        //监听头部事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '新增车辆',
                        maxmin: false,
                        area: ['400px', '510px'],
                        content: 'Add',
                        end: function () {
                            layui.tableReload();
                        }
                    });
                    break;
                case 'edit':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.open({
                            type: 2,
                            title: '编辑车辆',
                            maxmin: false,
                            area: ['400px', '510px'],
                            content: 'Edit?id=' + data[0].ID,
                            end: function () {
                                layui.tableReload();
                            }
                        });
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        $.ajax({
                            url: 'Delete',
                            data: { id: data[0].ID },
                            success: function (res) {
                                layer.alert(res.msg, function () {
                                    layui.tableReload();
                                })
                            }
                        });
                    }
                    break;
            };
        });
    });
</script>